<script setup>
import {getCurrentInstance, ref} from 'vue';

// 搜索输入框的值
const searchInput = ref('');
// 列表数据（包含eachType字段）
const homepageList = ref([]);
// 是否已经执行过搜索
const hasSearched = ref(false);
// 加载状态
const loading = ref(false);

const global = getCurrentInstance().appContext.config.globalProperties;

// 处理搜索逻辑（保持不变）
const handleSearch = async () => {
  homepageList.value = [];
  hasSearched.value = true;
  loading.value = true;

  if (!searchInput.value.trim()) {
    loading.value = false;
    return;
  }

  try {
    const response = await global.$http.get('/public/homepage/query/search', {
      params: {input: searchInput.value.trim()}
    });
    homepageList.value = response.data; // 假设返回数据中每个item包含eachType
  } catch (error) {
    console.error('搜索失败:', error);
    alert('搜索失败，请稍后重试');
  } finally {
    loading.value = false;
  }
};
</script>

<template>
  <div class="fuzzy-search-container">
    <el-row class="search-view">
      <router-link :to="{name:'home'}">
        <el-col :span="2" class="text-center">
          <el-icon>
            <ArrowLeft/>
          </el-icon>
        </el-col>
      </router-link>
      <!-- 搜索输入框 -->
      <el-col span="22" class="center">
        <el-input
            v-model="searchInput"
            placeholder="请输入内容"
            clearable
            class="search-input"
            @keyup.enter="handleSearch"
            style="width: 300px; margin-bottom: 20px;"
        >
          <template #append>
            <el-button @click="handleSearch" :loading="loading" icon="Search"/>
          </template>
        </el-input>
      </el-col>
    </el-row>

    <!-- 搜索结果展示 -->
    <div v-if="homepageList.length > 0 && !loading" class="result-list">
      <!-- 遍历列表，根据每个item的eachType渲染不同内容 -->
      <el-card
          v-for="(item, index) in homepageList"
          :key="index"
          class="performance-item"
      >
        <div class="item-content">
          <!-- 左侧：图片（通用） -->
          <div class="item-image">
            <el-image
                :src="item.url"
                alt="图片"
                style="width: 120px; height: 160px; object-fit: cover;"
            />
          </div>

          <!-- 右侧：信息（根据eachType区分） -->
          <div class="item-info">
            <h3 class="info-name">{{ item.name }}</h3>

            <!-- 当eachType为1时显示电影相关信息 -->
            <template v-if="item.eachType === 1">
              <p class="info-location">
                <span class="info-label">电影描述：</span>{{ item.desc }}
              </p>
              <p class="info-time">
                <span class="info-label">上映时间：</span>{{ item.dateLaunch }}
              </p>
              <p class="info-price">
                <span class="info-label">电影价格：</span>{{ item.price }} 元
              </p>
            </template>

            <!-- 当eachType为2时显示演出相关信息 -->
            <template v-if="item.eachType === 2">
              <p class="info-location">
                <span class="info-label">演出地点：</span>{{ item.desc }}
              </p>
              <p class="info-time">
                <span class="info-label">演出时间：</span>{{ item.dateLaunch }}
              </p>
              <p class="info-price">
                <span class="info-label">演出价格：</span>{{ item.price }} 元
              </p>
            </template>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 无结果提示 -->
    <div v-else-if="hasSearched && !loading" class="no-result">
      没有找到匹配的信息
    </div>
  </div>
</template>

<style scoped>
/* 样式保持不变 */
.search-view {
  display: flex;
  align-items: center;
  justify-content: center;
}

.text-center {
  font-size: 35px;
  width: 100%;
  cursor: pointer;
}

.center {
  position: relative;
}

.search-input {
  width: 100%;
  max-width: 600px;
}

.no-result {
  text-align: center;
  padding: 50px;
  color: #666;
}

.result-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 10px 0;
}

.performance-item {
  width: 100%;
  border: 1px solid #eee;
  border-radius: 4px;
  overflow: hidden;
  transition: all 0.3s;
}

.performance-item:hover {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.item-content {
  display: flex;
  padding: 16px;
  align-items: center;
}

.item-image {
  flex-shrink: 0;
  margin-right: 20px;
}

.item-info {
  flex-grow: 1;
  line-height: 1.8;
}

.info-name {
  margin: 0 0 10px 0;
  font-size: 18px;
  color: #333;
}

.info-label {
  color: #666;
  font-weight: 500;
}

@media (max-width: 768px) {
  .item-content {
    flex-direction: column;
    text-align: center;
  }

  .item-image {
    margin-right: 0;
    margin-bottom: 16px;
  }
}
</style>